<template>
  <div class="my-good-dialog">
    <el-dialog :visible="dialogTableVisible" :append-to-body="appendToBody" @open="openDialog"
               :show-close="false"
    >
      <div slot="title" class="my-dialog-title">{{ title }}</div>

      <el-tabs v-if="showTabs" v-model="selectedTabIndex" @tab-click="handleClickTab">
        <el-tab-pane label="物料" name="1" />
        <el-tab-pane label="产品" name="0" />
      </el-tabs>

      <div class="my-dialog-body">
        <div class="my-dialog-query-box" v-if="!enableData">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="68px"
          >
            <el-form-item prop="pdName">
              <el-input
                v-model="queryParams.pdName"
                placeholder="请输入产品名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="pdUnitType">
              <el-select
                v-model="queryParams.pdUnitType"
                placeholder="请选择单位"
                clearable
              >
                <el-option
                  v-for="u in allUnits"
                  :key="u.guId"
                  :label="u.guName"
                  :value="u.guId"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="pdGoodType">
              <el-select
                v-model="queryParams.pdGoodType"
                placeholder="请选择类型"
                clearable
              >
                <el-option
                  v-for="dict in getGbsGoodType"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="pdGoodAttr">
              <el-select
                v-model="queryParams.pdGoodAttr"
                placeholder="请选择产品类型"
                clearable
              >
                <el-option
                  v-for="dict in getGbsGoodAttr"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
              >搜索
              </el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置
              </el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="my-dialog-table">

          <!--          单选表格-->
          <el-table
            ref="myTable"
            v-loading="loading"
            :data="goodList"
            highlight-current-row
            @current-change="selectChangeGood"
            v-if="singleMode"
            style="overflow: auto"
          >
            <el-table-column
              align="center"
              label="序号"
            >
              <template slot-scope="scope">
                <div style="display: inline-block; margin-right: 20px">
                  <MyRadio v-model="selectedGood.pdCode"
                           :label="scope.row.pdCode"
                           radio-name="selectedGood"
                  />
                </div>
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" align="center" prop="pdCode" width="125" show-overflow-tooltip />
            <el-table-column label="产品名称" align="center" prop="pdName" width="125" show-overflow-tooltip />
            <el-table-column label="规格型号" align="center" prop="pdSpecType" show-overflow-tooltip />
            <el-table-column label="单位" align="center" prop="gbsGoodUnit.guName" show-overflow-tooltip />
            <el-table-column label="产品类型" align="center" prop="pdGoodType" show-overflow-tooltip>
              <template slot-scope="scope">
                <dict-tag :options="getGbsGoodType" :value="scope.row.pdGoodType" />
              </template>
            </el-table-column>
            <el-table-column label="产品属性" align="center" prop="pdGoodAttr" show-overflow-tooltip>
              <template slot-scope="scope">
                <dict-tag :options="getGbsGoodAttr" :value="scope.row.pdGoodAttr" />
              </template>
            </el-table-column>
          </el-table>

          <!--          多选表格-->
          <el-table
            ref="myTable"
            v-loading="loading"
            :data="goodList"
            @selection-change="selectChangeGoods"
            :row-key="getRowKeys"
            style="overflow: auto"
            v-else
          >
            <el-table-column
              type="selection"
              align="center"
              :reserve-selection="true"
            />
            <el-table-column
              type="index"
              align="center"
              label="序号"
            />
            <el-table-column label="产品编码" align="center" prop="pdCode" width="125" show-overflow-tooltip />
            <el-table-column label="产品名称" align="center" prop="pdName" width="125" show-overflow-tooltip />
            <el-table-column label="规格型号" align="center" prop="pdSpecType" show-overflow-tooltip />
            <el-table-column label="单位" align="center" prop="gbsGoodUnit.guName" show-overflow-tooltip />
            <el-table-column label="产品类型" align="center" prop="pdGoodType" show-overflow-tooltip>
              <template slot-scope="scope">
                <dict-tag :options="getGbsGoodType" :value="scope.row.pdGoodType" />
              </template>
            </el-table-column>
            <el-table-column label="产品属性" align="center" prop="pdGoodAttr" show-overflow-tooltip>
              <template slot-scope="scope">
                <dict-tag :options="getGbsGoodAttr" :value="scope.row.pdGoodAttr" />
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            :page-sizes="[5, 10]"
            @pagination="getList"
            v-if="!this.enableData"
          />
        </div>
      </div>

      <div slot="footer" class="my-dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="okDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listGood } from '@/api/yyj/gbs/good'
import { allUnit } from '@/api/yyj/gbs/unit'
import MyRadio from '@/components/MyRadio/index.vue'

export default {
  name: 'MyGoodDialog',
  model: {
    prop: 'dialogTableVisible',
    event: 'closeDialog'
  },
  components: { MyRadio },
  dicts: ['gbs_good_type', 'gbs_good_attr'],
  props: {
    // 标题
    title: {
      default: '',
      required: false
    },
    // 是否弹出显示
    dialogTableVisible: {
      required: true
    },
    // 选中的物品
    good: {
      required: false
    },
    goods: {
      required: false
    },
    // 单选还是复选 默认单选
    singleMode: {
      default: true,
      required: false
    },
    // 是否显示tab
    showTabs: {
      default: true,
      required: false
    },
    // 展示内容 both 所有 material 物料 product 产品
    showContent: {
      default: 'both',
      required: false
    },
    // 是否支持传入数据
    enableData: {
      required: false,
      default: false
    },
    // 传入数据
    listData: {
      required: false
    },
    appendToBody: {
      required: false,
      default: true
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 物品 通过 is_material 区分物料和产品表格数据
      goodList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        isMaterial: this.showTabs ? this.selectedTabIndex : null,
        pdName: null,
        pdUnitType: null,
        gbsGoodUnit: null,
        pdGoodType: null,
        pdGoodAttr: null,
        pdGoodClass: null,
        gbsGoodClass: null
      },
      allUnits: {},
      selectedGood: {},
      selectedPdCodes: [],
      selectedGoods: [],
      selectedTabIndex: '1'
    }
  },
  computed: {
    getGbsGoodType() {
      return this.dict.type.gbs_good_type
    },
    getGbsGoodAttr() {
      return this.dict.type.gbs_good_attr
    }
  },
  created() {
    // 改变显示样式
    this.changeShowContent()
    Promise.all([this.getUnits(), this.getList()])
  },
  methods: {
    /** 查询物品 通过 is_material 区分物料和产品列表 */
    async getList() {
      this.loading = true
      if (this.enableData) {
        this.goodList = this.listData
        this.loading = false
      } else {
        const res = await listGood(this.queryParams)
        this.goodList = res.rows
        this.total = res.total
        this.loading = false
      }
    },
    /** 查询单位 */
    async getUnits() {
      const res = await allUnit()
      this.allUnits = res.data
    },
    // 确认对话框的回调
    async okDialog() {
      if (this.singleMode) {
        this.$emit('update:good', this.selectedGood)
      } else {
        this.$emit('update:goods', this.selectedGoods)
      }
      this.$refs.myTable.clearSelection()
      this.$emit('closeDialog')
    },
    // 取消对话框的回调
    closeDialog() {
      this.$refs.myTable.clearSelection()
      this.$emit('closeDialog')
    },
    // 打开对话框的回调
    openDialog() {
      if (this.enableData) {
        this.goodList = this.listData
      }
      this.$nextTick(() => {
        if (this.goods && this.goods.length > 0) {
          this.goods.forEach(e1 => {
            this.$refs.myTable.toggleRowSelection(this.goodList.find(e2 => e2.pdCode === e1.pdCode), true)
          })
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // tab的点击事件
    handleClickTab(tab) {
      this.queryParams.isMaterial = tab.name
      this.getList()
    },
    // 多选框改变事件
    selectChangeGoods(selection) {
      this.selectedGoods = selection
    },
    // 单选 改变当前选中的内容
    selectChangeGood(selection) {
      this.selectedGood = selection
    },
    // 获取主键
    getRowKeys(row) {
      return row.pdCode
    },
    // 改变显示内容
    changeShowContent() {
      this.queryParams.isMaterial = this.showTabs ? this.selectedTabIndex : null
      if (this.showTabs) {
        this.queryParams.isMaterial = this.selectedTabIndex
        return
      }
      switch (this.showContent) {
        case 'material':
          this.queryParams.isMaterial = 1
          break
        case 'product':
          this.queryParams.isMaterial = 0
          break
        default:
          this.queryParams.isMaterial = null
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/yyj/table';

$normalBorderColor: #DCDFE6;
.my-dialog-title {
  height: 32px;
  line-height: 32px;
  border-bottom: 1px solid $normalBorderColor;
}

.my-dialog-query-box .el-input,
.my-dialog-query-box .el-select {
  width: 128px !important;
}

.my-dialog-footer {
  height: 40px;
  line-height: 40px;
  text-align: right;
  border-top: 1px solid $normalBorderColor;
}
</style>
